<template>
  <div class="AddMaterial">
    <div class="detPgHeader">
      <div class="detPgHeaderleft">
        <span class="side_1"></span>
        <span class="add_1">{{title}}</span>
      </div>
      <el-button type="info" icon="el-icon-back" onclick="window.history.go(-1)">返回</el-button>
    </div>
    <div class="head">
      <div class="lt_1"><span>物料信息</span></div>
      <div class="form_pro">
          <el-form :model="DataDb"  class="demo-form-inline" label-width="120px" :inline="true">
            <el-form-item label="结构层级"><el-input v-model="DataDb.jiegoucengji"></el-input></el-form-item>
            <el-form-item label="分组号"><el-input v-model="DataDb.fenzuhao"></el-input></el-form-item>
            <el-form-item label="件号"><el-input v-model="DataDb.jianhao"></el-input></el-form-item>
            <el-form-item label="名称"><el-input v-model="DataDb.name"></el-input></el-form-item>
            <el-form-item label="材质"><el-input v-model="DataDb.caizhi"></el-input></el-form-item>
            <el-form-item label="胚料尺寸宽"><el-input v-model="DataDb.size_width"></el-input></el-form-item>
            <el-form-item label="胚料尺寸-长"><el-input v-model="DataDb.size_length"></el-input></el-form-item>
            <el-form-item label="备注"><el-input v-model="DataDb.remark" ></el-input></el-form-item>
            <el-form-item label="类别">
              <el-select
                v-model="DataDb.cateid"
                value-key="Id"
                @change="getCateId($event)"
                placeholder="请选择" style="width: 100px;margin-right: 18px;">
                <el-option v-for="item in catelist" :key="item.value" :label="item.name" :value="item.Id"></el-option>
              </el-select>
              <el-button type="primary" @click="showCateDialog" size="small">新增类别</el-button>
            </el-form-item>
            <el-form-item label="责任人">
              <el-select
                placeholder="请选择"
                v-model="zerenrenObj"
                value-key="Id"
                style="width: 202px;" @change="getZeRenRen">
                <el-option
                  v-for="item in personlist"
                  :key="item.Id"
                  :label="item.name"
                  :value="item"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
      </div>
    </div>
    <div class="body">
      <div style="padding-bottom: 20px;">
        <div class="lt_1"><span>原料图纸</span></div>
        <el-form :model="DataDb"  class="demo-form-inline" label-width="80px" :inline="true">
          <el-form-item label="图纸号"><el-input v-model="DataDb.tuzhibianhao" style="width: 140px;"></el-input></el-form-item>
        </el-form>
        <div style="margin: 0px 20px 10px;width: 200px;height: 200px;display: inline-block">
          <el-upload
            class="avatar-uploader"
            action="/apis/ComApi.asmx/UpImg"
            :show-file-list="false"
            :on-success="function(res, file){return handleAvatarSuccess(res, file,'picture',DataDb)}"
            :on-change="function(file) {return imgPreview(file,'picture_full',DataDb)}">
            <img v-if="DataDb.picture_full" :src="DataDb.picture_full" style="max-width: 200px;max-height: 200px;" />
            <i v-else class="el-icon-plus avatar-uploader-icon" style="width: 200px;height:200px;"></i>
          </el-upload>
        </div>
      </div>
    </div>
    <div class="btn_bottom">
      <el-button type="primary" @click="saveData" v-if="canedit==true" >确认</el-button>
      <el-button class="bm_btn" onclick="window.history.go(-1)" type="info">返回</el-button>
    </div>
    <!--#region 类别管理-->
    <el-dialog
      title="类别管理"
      append-to-body
      :visible.sync="CateDialog"
      width="420px" center>
      <el-table :data="catelist" height="300" style="text-align: center">
        <el-table-column width="140" label="名称">
          <template slot-scope="scope">
            <el-input style="width: 100%;" v-model="scope.row.name"></el-input>
          </template>
        </el-table-column>
        <el-table-column width="140" label="排序">
          <template slot-scope="scope">
            <el-input style="width: 100%;" v-model="scope.row.orderby" @input="ValidateInt('orderby',scope.row)"></el-input>
          </template>
        </el-table-column>
        <el-table-column width="90" label="操作">
          <template slot-scope="scope">
            <el-button @click="saveCate(scope.row)" type="primary" size="small">保存</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog
        width="420px" center
        title="新增类别"
        :visible.sync="newCateDialog"
        append-to-body>
        <el-form label-width="80px">
          <el-form-item label="名称" style="width:297px">
            <el-input v-model="newCate.name"></el-input>
          </el-form-item>
          <el-form-item label="排序">
            <el-select
              v-model="newCate.orderby"
              value-key="Id"
              placeholder="请选择">
              <el-option
                v-for="item in  parseInt(catelist.length+1) "
                :key="item"
                :label="item"
                :value="item"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer" style="text-align: center">
          <el-button @click="newCateDialog = false">取 消</el-button>
          <el-button type="primary" @click="saveCate(newCate)">确 定</el-button>
        </span>
      </el-dialog>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="showNewCateDialog">新 增</el-button>
      </span>
    </el-dialog>
    <!--#endregion-->
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      zerenrenObj:{},
      DataDb:{
        CreateOn:"2020-06-20",
        picture_full:'',picture:"",
        zerenren:null,zerenrenId:null,
        status:9,
      },
      //#region 类别相关
      catelist:[],
      CateDialog:false,
      newCateDialog:false,/*类别新增*/
      newCate:{
        name:"",
        CreateOn:"2020-06-20",
        UpdateOn:"2020-06-20",
        orderby:"",
      },//新增类别
      // #endregion
      personlist:[],//责任人
      title:'新增物料',
      canedit:true,
    }
  },
  created() {
    this.getData(1,{},'catelist');//类别
    this.getData(2,{},'personlist');//责任人
    this.canedit=(this.$route.query.edit||null)==null;
    let id=this.$route.query.id||null
    if(id!=null){
      if (this.canedit==false){this.title="物料详情"} else {this.title="物料编辑"}
      this.getData_Detail(3,{id:id})
    }
  },
  methods: {
    getZeRenRen(e){
      this.DataDb.zerenren=e.name;
      this.DataDb.zerenrenId=e.Id;
      console.log(this.DataDb)
    },
    getCateId(e){this.DataDb.cateid=e},
    getData(index,jsondata,result){
      let jsondata_str=JSON.stringify(jsondata)
      axios("/apis/ScProductManage.asmx/getData?index=" + index + "&jsondata=" + jsondata_str).then(({ data }) => {
        var datas = this.$x2js.xml2js(data);
        this[result]=JSON.parse(datas.string.__text);
      });
    },
    getData_Detail(index,jsondata){
      let jsondata_str=JSON.stringify(jsondata)
      axios("/apis/ScProductManage.asmx/getData?index=" + index + "&jsondata=" + jsondata_str).then(({ data }) => {
        var datas = this.$x2js.xml2js(data);
        let result=JSON.parse(datas.string.__text);
        console.log(result,666)
        this.DataDb=result.baseobj
        console.log(this.DataDb)
        this.zerenrenObj={
          Id:result.baseobj.zerenrenId,
          name:result.baseobj.zerenren
        }
      });
    },
    /*#region 类别管理*/
    saveCate(e){
      let that=this;
      let isnew=false;
      if (e.name==''){that.$message.error("名称不能为空");return;}
      if(e.orderby==""){e.orderby=0}
      if (e.Id==0){isnew=true;}
      e.CreateOn='2020-06-20';e.UpdateOn='2020-06-20';
      e.userId=localStorage.getItem("message").Id,
        axios("/apis/ScProductManage.asmx/saveData?index=2&jsondata=" + JSON.stringify(e)).then(({ data }) => {
          var datas = that.$x2js.xml2js(data);
          let result=JSON.parse(datas.string.__text);
          that.$message({type:result.type,message:result.message});
          if(result.type=='success'){
            if (isnew==true){that.newCateDialog=false;}
            this.getData(1,{},'catelist')
          }
        });
    },//类别保存
    showCateDialog(){this.CateDialog=true;},
    showNewCateDialog(){
      this.newCateDialog = true
      this.newCate={
        Id:0,
        name:"",
        CreateOn:"2020-06-20",
        UpdateOn:"2020-06-20",
        orderby:"",
      };
    },
    /*#endregion*/
    /*#region 图片操作*/
    imgPreview(file,name,object) {
      let fileName = file.name;
      let regex = /(.jpg|.jpeg|.gif|.png|.bmp)$/;
      if (regex.test(fileName.toLowerCase())) {
        console.log(URL.createObjectURL(file.raw),'图片')
        object[name]=URL.createObjectURL(file.raw)
      } else {
        this.$message.error('请选择图片文件');
      }
    },
    handleAvatarSuccess(res, file,name,object) {
      var datas = this.$x2js.xml2js(res);
      object[name]=datas.UpFileReturn.url;
    },
    /*#endregion*/
    saveData(){
      let jsondata={userId:0, theobj:this.DataDb,};
      let jsondata_str=JSON.stringify(jsondata)
      console.log(jsondata_str,66666)
      axios.post("/apis/ScProductManage.asmx/saveData", { index: 1, jsondata: jsondata_str }).then(({ data }) => {
        let result=JSON.parse(data.d)
        this.$message({type:result.type,message:result.message});
        if (result.type == "success") {window.history.go(-1);}
      });
    },
    ValidateInt(name,object){object[name]=object[name].replace(/[^\d]/g,'');},
  },
}
</script>

<style lang="scss" scoped>
@import "@/assets/scss/base.scss";
.AddMaterial {
  border-top: 1px solid transparent;
  animation: fade-in; /*动画名称*/
  animation-duration: 0.4s; /*动画持续时间*/
  -webkit-animation: fade-in 0.4s; /*针对webkit内核*/
}
@keyframes fade-in {
  0% {opacity: 0;} /*初始状态 透明度为0*/
  40% {opacity: 0;} /*过渡状态 透明度为0*/
  100% {opacity: 1;} /*结束状态 透明度为1*/
}
@-webkit-keyframes fade-in {/*针对webkit内核*/
  0% {opacity: 0;} 40% {opacity: 0;} 100% {opacity: 1;}
}
.AddMaterial .detPgHeader{border: 1px solid transparent;box-sizing: border-box;height: 60px;display: flex;align-items: center;justify-content: space-between;padding: 0 20px;margin-bottom: 10px; }
.AddMaterial .detPgHeader .side_1 {width: 5px;height: 16px;background-color: $Header_color;display: inline-block;}
.AddMaterial .detPgHeader .add_1 { margin-left: 5px;font-size: 18px;font-weight: 400;}
.AddMaterial .head {background-color: $white;margin:0 20px 20px;overflow: hidden;border: 1px solid $bordercolor;border-radius: 5px;}
.AddMaterial .lt_1 {height: 50px;line-height: 50px;border-bottom: 1px solid $bordercolor;margin-bottom: 20px;font-family: "微软雅黑 Bold", "微软雅黑 Regular", "微软雅黑";font-weight: bold;font-style: normal;font-size: 14px;padding:0 20px;}
.AddMaterial .body{background-color: $white;margin:0 20px 20px;overflow: hidden;border: 1px solid $bordercolor;border-radius: 5px;}

.AddMaterial .avatar-uploader,.AddMaterial .avatar-uploader-icon {display: flex;align-items: center;justify-content: center;height:100% ;width: 100%;}
.AddMaterial .avatar-uploader{border: 1px dashed #cccccc;}
.AddMaterial .avatar-uploader:hover{border-color: #3a8ee6}
.AddMaterial .btn_bottom {padding: 30px; text-align: center;background: $white;margin: 20px;}
</style>
